<template>
	<view v-if="info">
		<view class="status_box p-30 fl-c-s">
			<view class="fr-s-c" @click="$to('./OrderRecord?sn='+ordersn)">
				<text class="c-ff bold fs-36" v-if="info.state!=12">{{obj[info.state]}}</text>
				<block v-else>
					<text class="c-ff bold fs-36">{{!info.materpaytime?obj[info.state]:'服务中'}}</text>
				</block>
				<image style="width: 36rpx; height: 36rpx;" class="m-l-10" :src="$path + '/tab3/right.png'" mode="">
				</image>
			</view>
			<view class="fr-s-c m-t-15" v-if="info.state==0">
				<text class="c-ff fs-24">距订单自动关闭还有，</text>
				<up-count-down :time="(info.jit_time*1000 - Date.now() || 0)" format="HH时mm分ss秒"></up-count-down>
			</view>
			<text class="c-ff fs-28 m-t-15" v-if="info.state==2">师傅已完成服务，感谢您的支持</text>
			<text class="c-ff fs-28 m-t-15" v-if="info.state==3">订单取消成功{{info.paytime?'，服务费用将原路退还':''}}</text>
			<text class="c-ff fs-28 m-t-15" v-if="info.state==1">请耐心等待，我们尽快催促师傅接单</text>
			<text class="c-ff fs-28 m-t-15" v-if="info.state==10">师傅已接单，请保持电话畅通</text>
			<text v-if="info.state==11" class="c-ff fs-28 m-t-15">师傅正在评估费用，请耐心等待~</text>
			<block v-if="info.state==12">
				<text v-if="!info.materpaytime" class="c-ff fs-28 m-t-15">师傅已评估费用，请您核实确认</text>
				<text v-else class="c-ff fs-28 m-t-15">您已缴费成功，师傅开始服务</text>
			</block>
			<text v-if="info.state==13" class="c-ff fs-28 m-t-15">您已缴费成功，师傅开始服务</text>
		</view>


		<view class="w-1 fl-s-c p-r-30 m-t-20">
			<view class="w-1 fl-s-s bg-ff relative br-20">
				<view class="w-1 fl-s-s p-30">
					<view class="fr-s-c">
						<text class="c-33 fs-24">{{info.residevice}}</text>
						<text class="c-33 fs-24 m-l-20">{{info.residecity}}</text>
						<text class="c-33 fs-24 m-l-20">{{info.residedist}}</text>
					</view>
					<text class="c-33 fs-32 bold m-t-10 text-line-2">{{info.address}}</text>
					<view class="fr-s-c m-t-10">
						<text class="c-33 fs-24">{{info.username}}</text>
						<text class="c-33 fs-24 m-l-20">{{info.mobile}}</text>
					</view>
				</view>
				<view class="w-1 bb-solid"></view>
				<view v-if="info.state!=3" style="padding: 25rpx 30rpx;" class="w-1 fr-b-c">
					<text class="c-33 fs-24">期望上门时间</text>
					<text class="c-77 fs-24">{{info.reservtime}}</text>
				</view>
				<view v-else style="padding: 25rpx 30rpx;" class="w-1 fr-b-c">
					<text class="c-33 fs-24">订单关闭时间</text>
					<text class="c-77 fs-24">{{timeFormat(info.restime,'yyyy-mm-dd hh:MM:ss')}}</text>
				</view>
			</view>

			<view class="w-1 br-20 bg-ff m-t-20 p-30 fl-s-s" v-if="info.completeimg">
				<text class="c-00 fs-28 bold">完成图片</text>
				<scroll-view scroll-x class="w-1 m-t-20" style="white-space: nowrap;">
					<image :src="item" style="display: inline-block; width: 164rpx; height: 164rpx;"
						@click="previewImage(index,info.completeimg.split(','))"
						v-for="(item,index) in info.completeimg.split(',')" :key="index" class="br-20 m-r-20"
						mode="aspectFill"></image>
				</scroll-view>
				<view class="w-1 fr-e-c m-t-25">
					<text class="c-77 fs-24">上传时间：{{timeFormat(info.servi_time,'yyyy-mm-dd hh:MM:ss')}}</text>
				</view>
			</view>

			<view class="bg-ff br-20 p-30 m-t-30 w-1" v-if="info.artduratime">
				<view class="fr-s-c">
					<view class="mainbar"></view>
					<text class="c-00 fs-28 m-l-10 bold">缴费单</text>
				</view>
				<view class="fr-s-c m-t-10">
					<text class="c-33 fs-28">缴费金额：</text>
					<text class="c-33 fs-36 bold">{{info.artduratime*Number(info.numprice)+info.materprice*1}}元</text>
				</view>
				<view class="w-1 bb-solid m-t-30"></view>
				<view class="w-1 fr-b-c m-t-30">
					<text class="c-33 fs-28 bold">人工费</text>
					<text class="fs-28 c-33">{{info.artduratime}}小时</text>
					<text class="fs-28 c-33">￥{{(info.artduratime*Number(info.numprice)).toFixed(2)*1}}</text>
				</view>
				<view class="w-1 bb-solid m-t-30"></view>
				<view class="w-1 fr-b-c m-t-30">
					<text class="c-33 fs-28 bold">材料费</text>
					<text class="fs-28 c-33">￥{{info.materprice}}</text>
				</view>
				<view class="w-1 fr-b-s warp">
					<image @click="previewImage(index,info.inventory.split(','))" style="width: 194rpx; height: 194rpx;"
						v-for="(item,index) in info.inventory.split(',')" :key="index" class="br-20 m-t-20" :src="item"
						mode="aspectFill"></image>
					<view style="width: 194rpx;"></view>
				</view>
				<view class="w-1 m-t-35 bb-solid"></view>
				<view class="w-1 fr-e-c  m-t-35">
					<view class="fl-s-e">
						<text
							class="fs-28 c-33 bold">合计：￥{{info.artduratime*Number(info.numprice)+info.materprice*1}}</text>
						<text class="c-33 fs-24 m-t-15">提交时间：{{info.bj_time}}</text>
						<text
							class="c-33 fs-24 m-t-15">付款时间：{{timeFormat(info.materpaytime,'yyyy-mm-dd hh:MM:ss')}}</text>
					</view>
				</view>
			</view>


			<view v-if="info.starf_mobile" class="bg-ff br-20 p-30 m-t-30 fl-s-s w-1">
				<text class="c-00 fs-28 bold">师傅信息</text>
				<view class="w-1 fr-s-c m-t-25">
					<image style="width: 96rpx; height: 96rpx;" class="circle" :src="$dimg(info.starf_avatar)"
						mode="aspectFill"></image>
					<text class="flex-1 m-l-20 m-r-20 text-line-1 c-33 fs-28 bold">{{info.starf_nickname}}</text>
					<image @click="call(info.starf_mobile)" :src="$path + '/tab3/call.png'"
						style="width: 58rpx; height: 58rpx;" mode=""></image>
				</view>
				<text class="c-aa fs-24 m-t-25">接单时间：{{$u.timeFormat(info.jd_time,'yyyy-mm-dd hh:MM:ss')}}</text>
			</view>


			<view class="w-1 bg-ff br-20 m-t-30">
				<view class="w-1 p-30" style="padding-bottom: 0;">
					<view class="w-1 bb-solid" style="padding-bottom: 30rpx;" v-for="(item,index) in info.goods"
						:key="index">
						<view class="relative fr-s-s w-1 h-1">
							<image style="width: 168rpx; height: 168rpx;" class="br-20" :src="$dimg(item.goodimg)"
								mode="aspectFill"></image>
							<view class="flex-1 m-l-20 fl-s-s">
								<view class="fr-s-c w-1">
									<text class="c-33 bold fs-28 text-line-1 flex-1">{{item.title}}</text>
								</view>
								<view class="fr-s-c w-1 m-t-30">
									<text class="flex-1 c-66 fs-24 text-line-2">规格名称：{{info.sku || '默认'}}</text>
								</view>
								<!-- <view class="fr-b-c w-1 m-t-30">
									<view class="c-price bold fs-28">
										<text>￥</text>
										<text class="bold">{{item.price}}</text>
									</view>
									<text class="c-33 fs-28" style="color: #B5B5B5;">x{{item.total}}</text>
								</view> -->
							</view>
						</view>
					</view>
					<view class="w-1">
						<view class="w-1 bb-solid fr-s-c" style="padding: 20rpx 0rpx;">
							<text class="c-33 fs-28 bold">数量</text>
							<text class="fs-28 flex-1 bold t-r c-33">x{{info.total}}</text>
						</view>
						<view class="w-1 bb-solid fr-s-c" style="padding: 20rpx 0rpx;">
							<text class="c-33 fs-28 bold">上门费</text>
							<text class="fs-28 flex-1 bold t-r c-33">￥{{info.goods[0].price}}</text>
						</view>
						<view class="w-1 bb-solid fr-s-c" style="padding: 20rpx 0rpx;">
							<text class="c-33 fs-28 bold">优惠券</text>
							<text class="fs-28 flex-1 bold t-r c-price">-￥{{info.discount}}</text>
						</view>
						<view class="w-1 fr-b-c" style="padding: 20rpx 0rpx;">
							<text class="c-33 fs-28 bold">应付款</text>
							<view class="c-33 fs-28 bold">
								<text class="">￥</text>
								<text class="">{{info.price}}</text>
							</view>
						</view>
					</view>

				</view>
			</view>

			<!-- <view class="w-1 bg-ff br-20 m-t-30 fr-s-s" v-if="info.type==1 && info.servetype==2 && info.verifcode" style="padding: 30rpx 20rpx;">
					<text class="c-33 fs-32 bold">线下核销码</text>
					<text class="m-l-20 c-66 fs-30 flex-1 t-r">{{info.verifcode}}</text>
				</view> -->


			<view class="w-1 br-20 bg-ff m-t-20 p-30 fl-s-s" v-if="info.envimage">
				<text class="c-00 fs-28 bold m-b-20">需求填报</text>
				<view class="fl-c relative br-20" style="width: 136rpx; height: 136rpx; background: #f3f3f3;">
					<image :src="info.envimage" class="w-1 h-1 br-20" mode="aspectFill"></image>
					<view class="w-1 h-1 absolute-0 fl-c br-20 o-h" style="padding: 10rpx;">
						<view class="" @click="lookvideo">
							<up-icon name="play-right-fill" size="50rpx" color="#ffffff"></up-icon>
						</view>
					</view>
				</view>
			</view>


			<view class="w-1 br-20 bg-ff m-t-20 p-30 fl-s-s">
				<text class="c-00 fs-28 bold">需求填报</text>
				<text class="m-t-15 fs-24 c-33">{{info.remark}}</text>
				<view class="w-1 fr-b-s warp" v-if="info.remarkimg">
					<image :src="item" @click="previewImage(index,info.remarkimg.split(','))"
						v-for="(item,index) in info.remarkimg.split(',')" :key="index"
						style="width: 194rpx; height: 194rpx;" class="br-20 m-t-20" mode="aspectFill"></image>
					<view style="width: 194rpx; height: 0;"></view>
				</view>
			</view>

			<view class="w-1 bg-ff br-20 m-t-30 fl-s-s" style="padding: 30rpx 20rpx;">
				<view class="w-1 br-20">
					<view class="w-1 fr-b-c">
						<text class="c-33 fs-28 bold">订单编号</text>
						<view class="fr-s-c">
							<text class="c-33 fs-28">{{ordersn}}</text>
							<text class="fs-28" style="margin: 0 5rpx;">|</text>
							<text class="c-77 fs-28" @click="copy(ordersn)">复制</text>
						</view>
					</view>
					<view class="w-1 fr-b-c m-t-20">
						<text class="c-33 fs-28 bold">创建时间</text>
						<text class="c-33 fs-28">{{timeFormat(info.createtime,'yyyy-mm-dd hh:MM:ss')}}</text>
					</view>

					<view class="w-1 fr-b-c m-t-20" v-if="info.paytime">
						<text class="c-33 fs-28 bold">付款时间</text>
						<text class="c-33 fs-28">{{timeFormat(info.paytime,'yyyy-mm-dd hh:MM:ss')}}</text>
					</view>
					<view class="w-1 fr-b-c m-t-20" v-if="info.restime">
						<text class="c-33 fs-28 bold">取消时间</text>
						<text class="c-33 fs-28">{{timeFormat(info.restime,'yyyy-mm-dd hh:MM:ss')}}</text>
					</view>

				</view>
			</view>

			<view style="height: 280rpx;"></view>
			<view class="iphonex w-1 bg-ff">
				<view class="w-1 fr-e-c warp p-30">
					<view class="btn3 fr-c m-l-20" @click="closeOrder(info)" v-if="info.state==0">取消订单</view>
					<view class="btn3 fr-c m-l-20" @click.stop="$to('./ModifyAppointment?sn='+info.ordersn)"
						v-if="info.state==1">修改预约</view>
					<view class="btn1 fr-c m-l-20" @click="subpay(info)"
						v-if="info.state==0 || (info.state==12 && !info.materpaytime)">立即支付</view>
					<view class="btn1 fr-c m-l-20" @click="sureover(info)" v-if="info.state==13">确认完成</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	// import codepop from '@/components/codepop.vue'
	import {
		timeFormat
	} from '@/uni_modules/uview-plus';
	const obj = {
		0: '待付款',
		1: '待接单',
		2: '已完成',
		3: '已关闭',
		4: '已发货',
		5: '待评价',
		6: '售后中',
		7: '售后成功',
		8: '退换货',
		9: '拒绝售后',
		10: '已接单',
		11: '服务中',
		12: '待缴费',
		13: '完成待确认'
	}

	function lookvideo() {
		uni.navigateTo({
			url: '/pages/lookvideo?src=' + encodeURIComponent(info.value.environask)
		})
	}

	function previewImage(current, urls) {
		uni.previewImage({
			current,
			urls
		})
	}

	function openlocation(item) {
		console.log(item)
		uni.openLocation({
			latitude: item.shoplat * 1,
			longitude: item.shoplng * 1,
			name: item.shop_name,
			address: item.pointaddr,
			fail: err => {
				console.log(err)
			}
		})
	}


	function sureover(item) {
		uni.showModal({
			title: '提示',
			content: '确认师傅已完成了吗？',
			success: (res) => {
				if (res.confirm) {
					uni.$post({
						url: '/api/Ordersystem/Maindtoconfirmorder',
						data: {
							aid: item.id
						}
					}).then(res => {
						getApp().tt(res.msg, 'success')
						uni.$emit('reorder')
						getinfo(false)
					})
				}
			}
		})
	}



	const sh = ref(0)
	const ordersn = ref('')
	const location = ref('')
	onLoad(async o => {
		ordersn.value = o.sn;
		location.value = await getApp().getlocation()
		getinfo()
		uni.$on('red2', val => {
			getinfo(false)
		})
	})
	onUnload(() => {
		uni.$off('red2')
	})
	onPullDownRefresh(() => {
		getinfo()
	})
	const nums = computed(() => {
		let num = 0;
		info.value.goods.map(i => num += i.total)
		return num;
	})

	function toshop() {
		if (info.value.type == 1) {
			uni.$u.route('/pages/Shop/ShopDetail?id=' + info.value.shop_id)
		} else {
			uni.$u.route('/pages/Shop/ShopDetail?id=' + info.value.shop_id + '&type=1')
		}
	}

	function copy(val) {
		uni.setClipboardData({
			data: String(val)
		})
	}

	const code = ref(null)

	function showcode(item) {
		// if(!item.pickcode) return uni.$u.toast('商品还在运输中，尚未生成取货码！')
		// citem.value = item;
		// code.value.show = true;
		uni.showModal({
			title: '提示',
			content: '确认收货吗？',
			success: (res) => {
				if (res.confirm) {
					uni.$post({
						url: '/api/Ordersystem/confirmreceipt',
						data: {
							orderid: item.id
						}
					}).then(res => {
						uni.$tt(res.msg, 'success')
						reget(false)
						uni.$emit('reorder')
					})
				}
			}
		})
	}

	function showcodes(item) {
		citem.value = item;
		code.value.show = true;
	}

	function call(val) {
		uni.makePhoneCall({
			phoneNumber: String(val)
		})
	}
	const info = ref('')

	function getinfo(loading = true) {
		uni.$post({
			url: '/api/Ordersystem/sworderlis',
			data: {
				ordersn: ordersn.value,
				lat: location.value.lat,
				lng: location.value.lng
			},
			loading
		}).then(res => {
			info.value = res.data;
			if (res.data.state * 1 >= 6 && res.data.state != 13 && res.data.state != 14) {
				sh.value = 1;
			} else {
				sh.value = 0;
			}
		})
	}

	function reget(loading = true) {
		getinfo(loading)
	}

	function del(item) {
		uni.showModal({
			title: '提示',
			content: '确定删除该订单吗？',
			success: (res) => {
				if (res.confirm) {
					uni.$post({
						url: '/api/Ordersystem/cancelvorder',
						data: {
							orderid: item.id,
							type: 2,
						}
					}).then(res => {
						uni.$tt(res.msg, 'success')
						reget(false)
						uni.$emit('reorder')
						uni.$delayBack()
					})
				}
			}
		})
	}

	// import paypop from '@/components/paypop.vue'
	const close = ref(null)
	const citem = ref('')

	function closeOrder(item) {
		uni.navigateTo({
			url: '/pages/Order/ChooseCancenReason?id=' + item.id + '&state=' + item.state
		})
		return
		uni.showModal({
			content: '确认取消交易吗？',
			success: (res) => {
				if (res.confirm) {
					uni.$post({
						url: '/api/Ordersystem/cancelvorder',
						data: {
							orderid: item.id,
							type: 1
						}
					}).then(res => {
						uni.$tt(res.msg, 'success')
						reget(false)
						uni.$emit('reorder')
					})
				}
			}
		})
	}



	// import applyaftersales from '@/components/applyaftersales.vue'
	const apply = ref(null)

	function applyafter(item) {
		citem.value = item;
		// apply.value.show = true;
		uni.navigateTo({
			url: '/pages/User/ApplyAfterAales?sn=' + item.ordersn + '&ekey=red2'
		})

	}

	const pay = ref(null)

	function subpay(item) {
		citem.value = item;
		// pay.value.show = true;
		confirmpay(item)
	}

	function confirmpay(item, val = 2) {
		console.log(val)
		let obj = {
			0: 'money',
			1: 'alipay',
			2: 'wechat'
		}
		uni.$post({
			url: item.state == 0 ? '/api/Ordersystem/payorder' : '/api/Ordersystem/payingListofmaters',
			data: {
				oid: item.id,
				ordersn: citem.value.ordersn,
				paytype: obj[val],
			}
		}).then(res => {
			if (val != 0) {
				uni.requestPayment({
					"provider": val == 2 ? "wxpay" : 'alipay',
					...res.data,
					success: (res) => {
						pay.value.show = false;
						uni.$tt('支付成功', 'success');
						// uni.$delayBack()
						reget(false)
						uni.$emit('reorder')
					},
					fail: err => {
						uni.$tt('支付失败', 'error')
						// uni.$delayBack()
					}
				})
			} else {
				pay.value.show = false;
				uni.$tt(res.msg, 'success');
				reget(false)
				uni.$emit('reorder')
			}
		})
	}

	// 查看物流
	function lookWl(item) {
		uni.navigateTo({
			url: "/pages/WebView/WebView?url=" + encodeURIComponent(
				`https://m.ickd.cn/result.html#com=auto&no=${item.expresssn}`)
		})
	}

	// 催发货
	function hurryGoods(item) {
		uni.$post({
			url: '/api/Ordersystem/Expediting_ipment',
			data: {
				orderid: item.id
			}
		}).then(res => {
			uni.$tt(res.msg, 'success')
		})
	}

	// import cancelapply from '@/components/cancelapply.vue'
	const applys = ref(null);

	function cancelapplyafter(item) {
		citem.value = item;
		applys.value.show = true;
	}
</script>

<style>
	page {
		background: #f1f5f6;

	}

	.sbtn {
		width: 164rpx;
		height: 52rpx;
		background: #eeeeee;
		border-radius: 12rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.colline {
		width: 0rpx;
		height: 60rpx;
		border: 1rpx solid #999999;
	}

	.btn1 {
		min-width: 170rpx;
		padding: 0 15rpx;
		height: 60rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #ffffff;
		background: #01796d;
		font-size: 28rpx;
	}

	.btn2 {
		min-width: 170rpx;
		padding: 0 15rpx;
		height: 60rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #ffffff;
		background: #ff6251;
		font-size: 28rpx;
	}

	.btn3 {
		min-width: 170rpx;
		padding: 0 15rpx;
		text-align: center;
		color: #505050;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 2rpx solid #E5E5E5;
		font-size: 28rpx;
	}

	.btn4 {
		font-size: 28rpx;
		min-width: 170rpx;
		padding: 0 15rpx;
		height: 64rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #ffffff;
		background: #fe9203;
		font-weight: bold;
	}


	.status_box {
		width: 750rpx;
		height: 242rpx;
		background: linear-gradient(to right, #01796D, #58C0AA);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	:deep(.u-count-down__text) {
		color: #ffffff !important;
		font-size: 24rpx !important;
	}

	.mainbar {
		width: 4rpx;
		height: 20rpx;
		background: #01796D;
		border-radius: 2rpx 2rpx 2rpx 2rpx;
	}
</style>